<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <title>Android监控</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        #bar {
            width: 1500px;
            height: 600px;
        }
    </style>
</head>
<body>
<div id="bar"></div>

<button id="toggleLabels">切换节点值显示</button>


<script>
    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
    var old_data = [];
    $(
        function () {
            fetchData(chart);
            setInterval(updateChartData, 5000);
        }
    );

    var initialOption = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: []
    };

    // 计算每个系列的最小值、最大值和平均值
    function calculateStats(series) {
        const values = series.data.map(dataPoint => dataPoint[1]);
        return {
            name: series.name,
            minValue: Math.min(...values),
            maxValue: Math.max(...values),
            averageValue: values.reduce((sum, value) => sum + value, 0) / values.length
        };
    }

    // 有最小值，平均值，最大值
    function fetchData() {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8001/lineChart",
            dataType: "json",
            success: function (result) {
                // 初始化图表
                if (chart.getOption() === undefined) {
                    initialOption = {
                        title: {
                            text: '性能指数'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data: result.series.map(series => series.name),
                            align: 'right' // 将图例放在右侧
                        },
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                start: 0,
                                end: 100
                            }
                        ],
                        xAxis: {
                            type: 'category',
                            data: result.xAxis.data
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: []
                    };

                    result.series.forEach((series, index) => {
                        initialOption.series.push({
                            name: series.name,
                            type: 'line',
                            data: series.data,
                            label: {
                                show: false,  // 是否显示节点数值
                                position: 'top'
                            },
                            tooltip: {
                                formatter: function (params) {
                                    return params.seriesName + ': ' + params.value[1];
                                }
                            },
                            markLine: {
                                data: [
                                    {
                                        name: '最小值',
                                        yAxis: calculateStats(series).minValue
                                    },
                                    {
                                        name: '最大值',
                                        yAxis: calculateStats(series).maxValue
                                    },
                                    {
                                        name: '平均值',
                                        lineStyle: {
                                            type: 'dashed'
                                        },
                                        yAxis: calculateStats(series).averageValue
                                    }
                                ]
                            }
                        });
                    });
                    chart.setOption(initialOption);
                } else {
                    chart.setOption(result);
                }
                old_data = chart.getOption().series.map(series => series.data);
            }
        });
    }

    function updateChartData() {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8001/lineDynamicData",
            dataType: "json",
            success: function (result) {
                old_data.forEach((seriesData, index) => {
                    seriesData.push([result.name, result.value[index]]);
                });

                // 更新图表数据和统计数据
                chart.setOption({
                    series: [{data: old_data[0]}, {data: old_data[1]}, {data: old_data[2]}, {data: old_data[3]}, {data: old_data[4]}, {data: old_data[5]}, {data: old_data[6]}, {data: old_data[7]}]
                });

                // 计算新的最小值、最大值和平均值
                const updatedSeries = chart.getOption().series.map(series => {
                    const values = series.data.map(dataPoint => dataPoint[1]);
                    return {
                        ...series,
                        markLine: {
                            data: [
                                {
                                    name: '最小值',
                                    yAxis: Math.min(...values)
                                },
                                {
                                    name: '最大值',
                                    yAxis: Math.max(...values)
                                },
                                {
                                    name: '平均值',
                                    lineStyle: {
                                        type: 'dashed'
                                    },
                                    yAxis: values.reduce((sum, value) => sum + value, 0) / values.length
                                }
                            ]
                        }
                    };
                });

                chart.setOption({series: updatedSeries});
            }
        });
    }

    // 按钮控制是否显示节点数值
    document.getElementById('toggleLabels').addEventListener('click', function () {
        const currentSeries = chart.getOption().series;
        const updatedSeries = currentSeries.map(series => {
            return {
                ...series,
                label: {
                    ...series.label,
                    show: !series.label.show // 反转显示状态
                }
            };
        });

        chart.setOption({series: updatedSeries});
    });

</script>
</body>
</html>